<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>v-model的特殊功能</h3>
        <h4>1、强制页面更新</h4>
        <!-- v-model的双向数据绑定的事件操作，是自带页面重新渲染的触发操作 -->
        <ul>
            <li v-for="(e,i) in emails">
                <span>{{ e }}</span><br>
                <input type="text" :value="e" @input=" e=$event.target.value "><br>
                <!-- 因为e为基本类型数据，且属于v-for范围的取值变量，本身和vue数据仓库变量没有任何关联 -->
                <!-- <input type="text" v-model="e"><br> -->
                <input type="text" :value="e" @input=" emails[i]=$event.target.value "><br>
                <!-- 
                    数组的下标操作虽然不能触发响应式功能，但可以完成数据在仓库中的记录
                    而v-model自带页面强制刷新功能，因此可以直接通过v-model完成数组下标数据操作
                -->
                <input type="text" v-model="emails[i]"><br>
            </li>
        </ul>
        <h4>2、数据仓库中对象新属性的自动劫持操作</h4>
        <!-- 
        数据仓库中的对象新添加属性不具有响应式特性:

            因为vue数据的响应式功能，是在vue对调用构造函数创建vue实例时完成的；
            因此响应式功能是和页面容器同时被定义完成；
            所以页面中通过事件方法完成事件回调任务，是在vue实例个容器构建完成后才能被调用
            而此时通过回调方法完成对于对象的新属性追加，是无法重现完成数据劫持操作的
         -->
        <p>user:{{ user }}</p>
        <input type="button" value="添加新属性" @click="addItem()"><br>
        <!--
            v-model指令在绑定对象属性时，如果该属性在对应的对象中不存在，v-model会单独为当前
            绑定的属性完成数据劫持操作-构建出响应式功能
            
            -> 因为v-model主动完成变量的劫持定义，是基于绑定对象中是否存在该属性的判断结果决定的
                所以可能存在v-model操作之前，已经存在不具有劫持功能的该属性定义，这是依然无法完成响应式构建
        -->
        <input type="text" v-model="user.age">

        <h4>3、单选按钮和复选按钮的对象数据记录</h4>
        <!-- 
            + v-model在操作单选按钮和复选按的数据记录时，
                如果以动态v-bind:value绑定的值是对象或者数组
                此时v-model指令会单独进行数据记录（包含数据类型和格式的）
            + v-model 事件操作时，使用的是对象地址的转存方式
            + v-model checked属性选中判断时，会对v-bind:value绑定的对象或数组数据
                进行字符串转换，通过JSON.stringify 方式完成字符比较
        -->
        <p>
            {{ selectStus1 }}
            <input type="text" v-model="selectStus1.name">
        </p>
        <ul>
            <li v-for="item in selectStus">
                {{ item }}
                <input type="text" v-model="item.name">
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(s,i) in stus">
                <input type="checkbox"  v-model="selectStus" :value=" i ">
                <input type="radio" :value=" s " v-model="selectStus1">
                {{ s }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                emails:[
                    "Nola@163.com",
                    "Hazel@163.com",
                    "Jessica@163.com",
                    "Wyman@163.com",
                ],
                user:{
                    username:"admin"
                },
                selectStus1:{ name: "tom", age: 23, sex: "m" },
                selectStus:[
                    { name: "tom", age: 23, sex: "m" }
                ],
                stus:[
                    { name:"tom",age:23,sex:"m" },
                    { name:"aaa",age:23,sex:"m" },
                    { name:"bbb",age:23,sex:"m" },
                    { name:"ccc",age:23,sex:"m" },
                ]
            },
            methods: {
                addItem(){
                    this.user.age = 23;
                }
            },
        })
    </script>
</body>
</html>